<template>
	<view class="page-my">
		<!--用户资料-->
		<view class="user-box" style="display: flex;justify-content: space-between;">
			<view class="user-info">
				<view class="img">
					<image style="width: 100px; height: 100px" :src="userImageUrl" v-if="userImageUrl"></image>
				</view>
				<view class="text">
					<view class="name" v-if="userName">
						{{ userName }}
						<image class="headimg" src="../../static/images/purchase.png" @click="goToEditProfile"></image>
					</view>
					<!-- 如果没有用户名，则显示登录按钮 -->
					<view class="name" v-else @click="goToLogin">
						立即登录
					</view>
				</view>
			</view>
			<view class="logout" v-if="userName" @click="logout">
				退出登录
			</view>
			<view class="logout" v-else>

			</view>


		</view>
		<!--我的订单-->
		<view class="my-con my-orders">
			<view class="tit">
				<view class="text">
					我的订单
				</view>
				<view class="more text-arrow" @click="goToOrder()">
					全部
				</view>
			</view>
			<view class="con-box">
				<view class="item" @click="goToOrderUnpaid()">
					<view class="img">
						<image class="img" src="../../static/images/Dpayment.png"></image>
					</view>
					<view class="text">
						待支付
					</view>
				</view>

				<view class="item" @click="goToOrderPending()">
					<view class="img">
						<image class="img" src="../../static/images/Dshipments.png"></image>
					</view>
					<view class="text">
						待发货
					</view>
				</view>

				<view class="item" @click="goToOrderReceived()">
					<view class="img">
						<image class="img" src="../../static/images/Yshipments.png"></image>
					</view>
					<view class="text">
						待收货
					</view>
				</view>

				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/appraise.png"></image>
					</view>
					<view class="text">
						待评价
					</view>
				</view>

				<view class="item" @click="goToOrderRefund()">
					<view class="img">
						<image class="img" src="../../static/images/refund.png"></image>
					</view>
					<view class="text">
						退款/仲裁
					</view>
				</view>
			</view>
		</view>
		<!--常用信息-->
		<view class="U-information">
			<view class="tit">
				<view class="text">
					常用信息
				</view>
			</view>
			<view class="information">
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/collection.png" mode=""></image>
					</view>
					<view class="text">
						我的收藏
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/browsingHistory.png" mode=""></image>
					</view>
					<view class="text">
						浏览记录
					</view>
				</view>
				<view class="item" @click="goToAddList()">
					<view class="img">
						<image class="img" src="../../static/images/deliveryAddress.png" mode=""></image>
					</view>
					<view class="text">
						收货地址
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/couponCenter.png" mode=""></image>
					</view>
					<view class="text">
						领券中心
					</view>
				</view>
			</view>
		</view>
		<!--更多服务-->
		<view class="More-services">
			<view class="tit">
				<view class="text">
					更多服务
				</view>
			</view>
			<view class="sevices">
				<view class="item">
					<view class="img">
						<image class="img" src='../../static/images/help.png' mode=""></image>
					</view>
					<view class="text">
						用户帮助
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/openStore.png" mode=""></image>
					</view>
					<view class="text">
						我要开店
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/share.png" mode=""></image>
					</view>
					<view class="text">
						分享好友
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/agreement.png" mode=""></image>
					</view>
					<view class="text">
						购宠协议
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/privacyPolicy.png" mode=""></image>
					</view>
					<view class="text">
						隐私政策
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/feedback.png" mode=""></image>
					</view>
					<view class="text">
						意见反馈
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/statement.png" mode=""></image>
					</view>
					<view class="text">
						平台声明
					</view>
				</view>
				<view class="item">
					<view class="img">
						<image class="img" src="../../static/images/setting.png" mode=""></image>
					</view>
					<view class="text">
						我的设置
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import axios from 'axios';
	// 假设你使用的是axios库发送网络请求
	import service from '../../utils/request.js';
	export default {
		data() {
			return {
				userName: '',
				username: '',
				password: '',
				fileName: '',
				userImageUrl: ''
			};
		},
		mounted() {
			this.getImageUrl();
		},
		 onLoad() {
		    
		  },
		methods: {
			goToOrderUnpaid() {
				uni.navigateTo({
					url: '/pages/order/order?status=unpaid'
				});
			},
			goToOrderPending() {
				uni.navigateTo({
					url: '/pages/order/order?status=pending'
				});
			},
			goToOrderReceived() {
				uni.navigateTo({
					url: '/pages/order/order?status=received'
				});
			},
			goToOrderRefund() {
				uni.navigateTo({
					url: '/pages/order/order?status=refund'
				});
			},
			goToLogin() {
				uni.navigateTo({
					url: '/subpages/login/login'
				})
			},
			goToOrder() {
				uni.navigateTo({
					url: '/pages/order/order'
				})
			},
			goToAddList() {
				uni.navigateTo({
					url: '/pages/deliveryAddList/deliveryAddList'
				})
			},
			goToEditProfile() {

				// 跳转到编辑用户名的页面
				console.log('跳转到编辑页面');
				uni.navigateTo({
					url: '/subpages/edit/edit'
				})
				// 这里可以添加跳转到编辑页面的代码，例如使用路由跳转
			},
			async getImageUrl() {
				try {
					// 假设 authToken 是从本地存储或全局状态中获取的认证令牌
					const authToken = localStorage.getItem('authToken');
					console.log("authToken" + authToken);
					// 设置请求头，将认证令牌添加到Authorization字段
					const headers = {
						'Authorization': `${authToken}`
					};
					console.log("head" + JSON.stringify(headers));
					// 发起GET请求到后端的userInfo接口
					const response = await service.get('/user/userInfo', {
						headers: headers
					});
					console.log("res!" + JSON.stringify(response));
					const userInfo = response.data;
					const userID = userInfo.id;
					localStorage.setItem('userID', userID);
					console.log("设置的userID", userID);
					this.userImageUrl = response.data.userPic;
					this.userName = response.data.username;
					console.log(this.userImageUrl);
					// 使用 $nextTick 确保在数据更新后立即更新视图
					this.$nextTick(() => {
                        
					});
					//     // 检查响应状态
					//     if (response && response.data && response.data.success) {
					//       // 假设后端返回的Result对象中包含success字段和data字段
					//       // data字段包含实际的用户信息
					//       this.user = response.data.data;
					//     } else {
					//       console.error('Failed to retrieve user info');
					//     }
				} catch (error) {
					console.error('Failed to fetch user info', error);
					// 处理错误，例如显示错误信息或进行重试
					this.userImageUrl = '';
				}

			},
			async logout() {
				try {
					// 清除存储中的认证令牌
					localStorage.removeItem('authToken');
					// 可以添加其他清理工作，例如清除用户信息或全局状态
					this.userImageUrl = '';
					this.userName = '';
					// 跳转到登录页面或首页
					uni.navigateTo({
						url: '/subpages/login/login' // 确保这是您应用中登录页面的路径
					});
				} catch (error) {

				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	@use "my";
</style>